import React, { PureComponent } from 'react'
import {
  View,
  
  StyleSheet
} from 'react-native'
import PropTypes from 'prop-types'
import * as Animatable from 'react-native-animatable'
import { ScaleS, ScaleT } from '../../../../utils/ScreenUtil'
import CustomButton from '../../../../components/button/CustomButton'

export default class TabHeader extends PureComponent {
  static propTypes = {
    onItemClick: PropTypes.func,
    tabLabels: PropTypes.array
  }

  constructor (props) {
    super(props)
    this.state = {
      activeTab: 0
    }
  }

  _onItemClick = (index) => {
    const { onItemClick } = this.props
    this.setState({
      activeTab: index
    }, () => {
      onItemClick && onItemClick(index)
    })
  }

  render () {
    const { tabLabels } = this.props
    const { activeTab } = this.state
    return (
      <View style={styles.container}>
        {tabLabels &&
        tabLabels.map((item, index) => (
          <Item
            key={'tabitem' + index}
            item={item}
            index={index}
            activeTab={activeTab}
            onItemClick={this._onItemClick}
          />
        ))}
        <Animatable.View
          style={[
            styles.itemActiveLabel,
            { left: ScaleS(60 * activeTab + 30) }
          ]}
          transition='left'
        />
      </View>

    )
  }
}

class Item extends PureComponent {
  static propTypes = {
    item: PropTypes.string,
    index: PropTypes.number,
    activeTab: PropTypes.number,
    onItemClick: PropTypes.func
  }

  clicked = () => {
    const { index, activeTab, onItemClick } = this.props
    if (index !== activeTab) {
      onItemClick && onItemClick(index)
    }
  }

  render () {
    const { item, index, activeTab } = this.props
    const active = index === activeTab
    return (
      <CustomButton style={styles.item} onPress={this.clicked}>
        <Animatable.Text
          style={[styles.name, active && styles.active]}
          transition='fontSize'
        >
          {item}
        </Animatable.Text>
      </CustomButton>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: ScaleS(31),
    paddingHorizontal: ScaleS(10),
    flexDirection: 'row',
    height: ScaleS(46 + 31),
    position: 'relative',
    backgroundColor: 'white'
  },
  itemActiveLabel: {
    width: ScaleS(20),
    height: ScaleS(4),
    borderRadius: ScaleS(2),
    position: 'absolute',
    bottom: 0,
    zIndex: 2,
    backgroundColor: '#FFD810',
    left: ScaleS(30)
  },
  item: {
    width: ScaleS(60),
    height: ScaleS(42),
    justifyContent: 'center',
    flexDirection: 'column-reverse'
  },
  name: {
    textAlign: 'center',
    fontSize: ScaleT(20),
    fontWeight: '400',
    color: '#CECDCE'
  },
  active: {
    fontSize: ScaleT(22),
    fontWeight: '500',
    color: '#000000'
  }
})
